
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>移动缩放图片</title>
</head>
<body>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    body {
        background: #333;
    }

    #map {
        position: relative;
        overflow: hidden;
        margin: 50px auto;
        border: 1px solid #fff;
        background: #fff;
    }

    #map img {
        position: absolute;
    }
</style>
<div id="map" style="width: 500px;height: 500px;">
    <img src="img1.jpg" alt="" width="936" height="322" style="width:500px; height:500px;">
   <!-- <map name="Map" id="aaa">

    </map>-->


</div>

<script src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
<script>

    function evnt(event) {
        //------------------------------------------
        /*	var img1 = document.getElementsByTagName("img")[0];
         if(img1.addEventListener){
         img1.onmousewheel = scrollfun;
         img1.addEventListener("DOMMouseScroll",scrollfun,false);
         }
         function scrollfun (e){
         var ev= e || window.event;//兼容分别为IE和火狐
         var num=ev.wheelDelta||ev.detail;//兼容分别为IE和火狐
         //alert(num);
         if((num== -3 || num ==120)){*/
        //--------------------------------------------------
        var evn = event,
            eventDoc, doc, body,
            button = evn.button
        evn.target = evn.target || evn.srcElement;


        // Calculate pageX/Y if missing and clientX/Y available
        if (evn.pageX == null && evn.clientX != null) {
            eventDoc = evn.target.ownerDocument || document;
            doc = eventDoc.documentElement;
            body = eventDoc.body;
            evn.pageX = evn.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) -
            (doc && doc.clientLeft || body && body.clientLeft || 0);
            evn.pageY = evn.clientY + (doc && doc.scrollTop || body && body.scrollTop || 0) -
            (doc && doc.clientTop || body && body.clientTop || 0);
        }

        if (!evn.preventDefault) {
            evn.preventDefault = function() {
                this.returnValue = false;
            }
        }

        if (!evn.stopPropagation) {
            evn.stopPropagation = function() {
                this.cancelBubble = true;
            }
        }

        if (evn.which == null && (evn.charCode != null || evn.keyCode != null)) {
            evn.which = evn.charCode != null ? evn.charCode : evn.keyCode;
        }

        // Add which for click: 1 === left; 2 === middle; 3 === right
        // Note: button is not normalized, so don't use it
        if (!evn.which && button !== undefined) {
            evn.which = (button & 1 ? 1 : (button & 2 ? 3 : (button & 4 ? 2 : 0)));
        }
        return evn
    };


    function getOffset(o) {
        var left = 0,
            top = 0;
        while (o != null && o != document.body) {
            top += o.offsetTop;
            left += o.offsetLeft;
            o = o.offsetParent;
        }
        return {
            left : left,
            top : top
        };
    };
    var d = document;
         function bind(b, a, c) {
            b.addEventListener ? b.addEventListener(a, function(event) {
                c.call(b, evnt(event));
            }, false) : b.attachEvent("on" + a, function(event) {
                c.call(b, evnt(window.event));
            });
        };
         function on(b, o) {
            for (var a in o) {
                bind(b, a, o[a]);
            }
        };
    var isRun,
        startX,
        startY,
        endX,
        endY,
        rX,
        rY,
        bgX = 0,
        bgY = 0,
        $b = d.getElementById("map");
        ww = parseInt($b.style.width),
        wh = parseInt($b.style.height),
        i = $b.getElementsByTagName('img')[0],
        img = i.style,
        imgw = parseInt(img.width),
        imgh = parseInt(img.height),
        scaleSize = 1;
        function rs() {
        var w, h;
//以完全显示图片为基准,如果改为>，则为以铺满屏幕为基准
        if (ww / wh > imgw / imgh) {
            w = ww;
            h = imgh * ww / imgw;
            bgX = 0;
            bgY = -(h - wh) / 2;
            scaleSize = ww / imgw; //初始比率
        } else {
            w = imgw * wh / imgh;
            h = wh;
            bgX = -(w - ww) / 2;
            bgY = 0;
            scaleSize = wh / imgh;
        }
        img.width = w + "px";
        img.height = h + "px";
        img.left = bgX + "px";
        img.top = bgY + "px";
    }

    rs();
    /* Init */
    on(d, {
        "mousedown" : function(e) {
//按中建快速还原大小
            if (e.which === 2) {
                rs();
            }
            if (e.which === 1 && e.target && (e.target === i || e.target === $b)) {
                isRun = true;
                startX = e.pageX;
                startY = e.pageY;
                e.preventDefault();
            }
        },
        "mouseup" : function(e) {
            if (e.which !== 1) {
                return;
            }
            img.cursor = "default";
            isRun = false;
            bgX = rX;
            bgY = rY;
            e.preventDefault();
        },
        "mousemove" : function(e) {
            if (e.which !== 1) {
                return;
            }
            if (isRun) {
                e.preventDefault();
                img.cursor = "move";
                endX = e.pageX;
                endY = e.pageY;
                rX = bgX + endX - startX;
                rY = bgY + endY - startY;
                img.left = rX + "px";
                img.top = rY + "px";
            }
        },
        //以鼠标为中心缩放，同时进行位置调整
        "mousewheel" : function(e) {
            var deltaY = 0;
            var x = e.pageX;
            var y = e.pageY;
            e.preventDefault();
            if (e.target && (e.target === i)) {
                var l = getOffset($b);
                x = x - l.left;
                y = y - l.top;
                var p = (e.wheelDelta) / 1200;
                var ns = scaleSize;
                ns += p;
                ns = ns < 0.1 ? 0.1 : (ns > 5 ? 5 : ns); //可以缩小到0.1,放大到5倍
//计算位置，以鼠标所在位置为中心
//以每个点的x、y位置，计算其相对于图片的位置，再计算其相对放大后的图片的位置
                bgX = bgX - (x - bgX) * (ns - scaleSize) / (scaleSize);
                bgY = bgY - (y - bgY) * (ns - scaleSize) / (scaleSize);
                scaleSize = ns; //更新倍率


                img.width = imgw * ns + "px";
                img.height = imgh * ns + "px";
                img.top = bgY + "px";
                img.left = bgX + "px";
            }
        }
    });


</script>
</body>
</html>